<template>
<!-- 这是运输任务管理里的  五个子模块  -->
<!-- echarts的容器 默认宽高为0,若不设置页将不进行展示 -->
  <div class="main">
    <div class="mainBoxA">
          <el-button class="btn01" @click="jbxx()"><h3>基本信息</h3></el-button><br>
          <el-button class="btn02" @click="rwgj()"><h3>任务轨迹</h3></el-button><br>
          <el-button class="btn03" @click="ydxq()"><h3>运单详情</h3></el-button><br>
          <el-button class="btn04" @click="jfzp()"><h3>交付照片</h3></el-button><br>
          <el-button class="btn05" @click="thzp()"><h3>提货照片</h3></el-button><br>
    </div>
    <!-- 基本信息  this.scoperow.transportationNumber -->
    <div class="mainBoxB" id="jbxx" style="display: block">
      <div class="jibenxingxi"  >
        <h4><span style="position: relative; left: -426px; top:10px;">基本信息</span></h4>
        <el-form :inline="true" :model="findysrwxqBeanJBXX" class="demo-form-inline">
          <el-form-item label="运输任务编号:">
            <el-input v-model="findysrwxqBeanJBXX.transportationNumber" placeholder="任务编号"></el-input>
          </el-form-item> 
          <el-form-item label="车牌号码:">
            <el-input v-model="findysrwxqBeanJBXX.transportationLicensePlateNumber" placeholder="司机名称"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="调度机构:">
            <el-input v-model="findysrwxqBeanJBXX.transportationSchedulingMechanism" placeholder="建材城网点"></el-input>
          </el-form-item>
          <el-form-item label="起始地" >
            <el-input v-model="findysrwxqBeanJBXX.transportationTheOrigin" placeholder="建材城网点"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="目的地" >
            <el-input v-model="findysrwxqBeanJBXX.transportationDestination" placeholder="新惠城网点"></el-input>
          </el-form-item>
        </el-form>
        <hr>
        <el-button size="60px"> 返回</el-button>
      </div>
    </div>
  <!-- 任务轨迹 -->
    <div class="mainBoxB" id="rwgj" style="display: none">
      <div class="renwuguiji" >
        <h4><span style="position: relative; left: -426px; top:10px;">任务轨迹</span></h4>
        <el-form :inline="true" :model="findysrwxqBeanJBXX" class="demo-form-inline">
          <el-form-item label="车牌号码:">
            <el-input v-model="findysrwxqBeanJBXX.transportationLicensePlateNumber" ></el-input>
          </el-form-item>          
          <el-form-item label="司机:">
            <el-input v-model="findysrwxqBeanJBXX.transshipmentTmsDriverDetails.driverName" ></el-input>
          </el-form-item> 
          <br>
          <el-form-item label="计划发车时间:">
            <el-input v-model="findysrwxqBeanJBXX.transportationScheduleDepartureTime" ></el-input>
          </el-form-item>
          <el-form-item label="实际发车时间" >
            <el-input v-model="findysrwxqBeanJBXX.transportationActualDepartureTime" ></el-input>
          </el-form-item>
          <br>
          <el-form-item label="计划到达时间:">
            <el-input v-model="findysrwxqBeanJBXX.scheduledtimeofarrival" ></el-input>
          </el-form-item>
          <el-form-item label="实际到达时间" >
            <el-input v-model="findysrwxqBeanJBXX.actualtimeofarrival" ></el-input>
          </el-form-item>
        </el-form>
        <hr>
        <span>轨迹查看</span>
        <div class="baiduMap" id="">
        </div>
        <el-button size="60px"> 返回</el-button>
      </div>
    </div>
  <!-- 运单详情 -->
    <div class="mainBoxC" id="ydxq" style="display:none">
      <div class="yundanxiangqing">
        <el-table
          :data="TheWaybillDetails"
          border
          :header-cell-style="{ background: '#a9cdff5a',color: '#333',}" body-align="center">
          <el-table-column
            prop="viewDetailsId"
            label="序号"
            width="70%" style="" header-align="center">
          </el-table-column>
          <el-table-column
            prop="viewDetailsNumber"
            label="运单编号"
            width="150%" header-align="center">
          </el-table-column>
          <el-table-column
            prop="viewDetailsPlaceTime"
            label="下单时间"
            width="158%" header-align="center">
          </el-table-column >
          <el-table-column
            prop="viewDetailsNameSender"
            label="发件人姓名"
            width="100%" header-align="center">
          </el-table-column>
          <el-table-column
            prop="viewDetailsTelephoneNumber"
            label="发件人电话" width="130%" header-align="center">
          </el-table-column>
          <el-table-column
            prop="viewDetailsAddressSender"
            label="发件人地址" width="255%" header-align="center">
          </el-table-column>
          <el-table-column
            prop="viewDetailsItemNumber"
            label="货品数量" width="80%" header-align="center" class="tabCOler">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="126%" header-align="center" >
             <template slot-scope="scope">
                <el-button  @click.native="findysrwxqEND(scope.row)">查看详情</el-button>
             </template>
               <!-- <template slot-scope="scope">

            <el-button  @click.native="findysrwxq(scope.row)">查看运输任务详情</el-button>

          </template> -->
          </el-table-column>
        </el-table>
    </div>  
    </div> 
  <!-- 交付照片 -->
    <div class="mainBoxD" id="jfzp" style="display:none">
      <div><span ><H5>交付货品照片</H5></span>
        <div class="imgJF" >

        </div>
      </div>
      <div><span ><H5>支付回单照片</H5></span>
        <div class="imgJF" >

        </div>  
      </div>
    </div>
  <!-- 提货照片 -->
    <div class="mainBoxE" id="thzp" style="display:none">
      <div><span ><H5>提货货品照片</H5></span>
        <div class="imgJFTH" >

        </div>
      </div>
      <div><span ><H5>提货凭证照片</H5></span>
        <div class="imgJFTH" >

        </div>  
      </div>
    </div> 
      
  </div> 

</template>

<script >

export default {
    data() {
      
      return {
        //基本信息与任务轨迹数据
        findysrwxqBeanJBXX:{
          transportationNumber:"", //运输任务编号
          transportationLicensePlateNumber:"", //车牌号码
          transportationSchedulingMechanism:"", //调度机构
          transportationTheOrigin:"", //起始地
          transportationDestination:"", //目的地
          driverName:"",//司机
          transportationScheduleDepartureTime:"",//计划发车时间
          transportationActualDepartureTime:"",//实际发车时间
          scheduledtimeofarrival:"",//计划到达时间
          actualtimeofarrival:"",//实际到达时间
        },
        //运单详情数据
        TheWaybillDetails:[],
        scoperow:[],
        parameter: {
        page: 1,
        num: 2,
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],

        // display: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        kk:false
      };
    },
    methods:{
        findysrwxqEND(scoperow){
            console.log(scoperow)
            this.$router.push({path:'/home/Transportation_Management_END',query:scoperow}) 
        },
        jbxx(){
          document.getElementById("jbxx").style.display="block";
          document.getElementById("rwgj").style.display="none";
         
          this.load();  
          this.findysrwxqBeanJBXX.transportationNumber = this.scoperow.transportationNumber;
        },
        rwgj(){
          document.getElementById("jbxx").style.display="none";
          document.getElementById("rwgj").style.display="block";
          document.getElementById("ydxq").style.display="none";
          this.load();  
          this.findysrwxqBeanJBXX.transportationNumber = this.scoperow.transportationNumber;
        },
        ydxq(){
          document.getElementById("jbxx").style.display="none";
          document.getElementById("rwgj").style.display="none";
          document.getElementById("jfzp").style.display="none";
          document.getElementById("thzp").style.display="none";
          document.getElementById("ydxq").style.display="block"; 
          this.load();  
          this.findysrwxqBeanJBXX.transportationNumber = this.scoperow.transportationNumber;
               console.log(this.scoperow.transportationNumber)
               console.log()
          this.axios.get("/api/transshipment-tms-transportation-task-management/TheWaybillDetails",{params:{"transportationNumber":this.scoperow.transportationNumber}}).then((res) => {
          this.TheWaybillDetails = [res.data];
          // this.total = res.data.total;
          console.log(this.TheWaybillDetails)
          //加载样式
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        });
           console.log(this.scoperow.transportationNumber)
        },
        jfzp(){
          document.getElementById("jbxx").style.display="none";
          document.getElementById("rwgj").style.display="none";
          document.getElementById("ydxq").style.display="none"; 
          document.getElementById("thzp").style.display="none"; 
          document.getElementById("jfzp").style.display="block"; 
        },
        thzp(){
          document.getElementById("jbxx").style.display="none";
          document.getElementById("rwgj").style.display="none";
          document.getElementById("ydxq").style.display="none"; 
          document.getElementById("jfzp").style.display="none";
          document.getElementById("thzp").style.display="block";   
        },
        findysrwxqBean(){
          this.load()  
        },
        load(){
          console.log(this.scoperow)
          this.findysrwxqBeanJBXX = this.scoperow
         // console.log(this.scoperow.transshipmentTmsDriverDetails) 
          console.log("查看详情也顶顶顶")
          console.log(this.findysrwxqBeanJBXX)
        },
      },
      created(){
          this.scoperow=this.$route.query;  
          this.load();
      }
  }
   

</script>

<style  scoped>
  .btn01{position: relative;top: 25px; }
  .btn02{position: relative;top: 45px;}  
  .btn03{position: relative;top: 65px;}
  .btn04{position: relative;top: 85px;}
  .btn05{position: relative;top: 105px;}
  .el-table {
    position: relative;  
    width: 1070px;
    top: 85px;
    left: 60px;
    background-color: antiquewhite;
  }
  .baiduMap{
    width: 1000px;
    height: 450px;
    border: 1px solid red;
    position: relative;
    top: 12px;
    left: 0px;
    background-color: rgb(61, 16, 16);
  }
  .imgJFTH{width: 200px; height: 200px;  background-color: rgb(48, 208, 104); position: relative; left: 500px;}
  .imgJFTH{width: 200px; height: 200px;  background-color: rgb(15, 99, 58); position: relative; left: 500px;}
  .imgJF{width: 200px; height: 200px;  background-color: antiquewhite; position: relative; left: 500px;}
  .imgJF{width: 200px; height: 200px;  background-color: antiquewhite; position: relative; left: 500px;}
  .mainBoxE{
    width: 1190px;
    height: 750px;
    border: 1px solid red;
    position: relative;
    top: -752px;
    left: 170px;
    background-color: white;
  }
  .mainBoxD{
    width: 1190px;
    height: 750px;
    border: 1px solid red;
    position: relative;
    top: -752px;
    left: 170px;
    background-color: white; 
  }
  .mainBoxC{
    width: 1190px;
    height: 750px;
    border: 1px solid red;
    position: relative;
    top: -752px;
    left: 170px;
    background-color: white;
  } 
  .mainBoxB{
    width: 1190px;
    height: 750px;
    border: 1px solid red;
    position: relative;
    top: -752px;
    left: 170px;
    background-color: white;
  }
  .mainBoxA{
    width: 150px;
    height: 750px;
    border: 1px solid red;
    position: relative;
    background-color: white;
  }
  .main{background-color: gainsboro;}
</style>

